<template>
  <div
    :style="divStyle"
    @mouseenter="changeEnter(true)"
    @mouseleave="changeEnter(false)"
  >
    <img
      id="svg-image"
      :src="iconName"
      class="svg-icon"
      :class="svgClass"
      :style="svgStyle"
      alt=""
    />
  </div>
  <!-- <svg :class="svgClass" :style="svgStyle" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg> -->
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";

export default defineComponent({
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      default: "1rem",
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: true,
    },
    center: {
      type: Boolean,
      default: true,
    },
    color: {
      type: String,
      default: "black",
    },
    hoverColor: {
      type: String,
      default: "black",
    },
    clickColor: {
      type: String,
      default: "black",
    },
    className: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const iconName = computed(() => {
      return `/static/icons/svg/${props.iconClass}.svg`;
    });

    const svgClass = computed(() => {
      if (props.className) {
        return "svg-icon " + props.className;
      } else {
        return "svg-icon";
      }
    });
    let enter = ref(false);
    function changeEnter(bool: boolean) {
      enter.value = bool;
    }
    const divStyle = computed(() => {
      const res: any = {};
      if (props.size) {
        res.width = props.size;
        res.height = props.size;
      }
      if (props.width != null && props.width !== "") {
        res.width = props.width;
      }
      if (props.height != null && props.height !== "") {
        res.height = props.height;
      }
      res.overflow = "hidden";
      return res;
    });
    const svgStyle = computed(() => {
      const res: any = {};
      if (props.size) {
        res.width = props.size;
        res.height = props.size;
      }
      if (props.width != null && props.width !== "") {
        res.width = props.width;
      }
      if (props.height != null && props.height !== "") {
        res.height = props.height;
      }
      res.visibility = props.show ? "visible" : "hidden";
      if (enter.value) {
        res.filter = `drop-shadow(${props.hoverColor} 200px 0)`;
      } else {
        res.filter = `drop-shadow(${props.color} 200px 0)`;
      }

      if (props.center) {
        res.display = "flex";
        res.alignItems = "center";
      }
      return res;
    });
    const styleExternalIcon = computed(() => {
      return {
        mask: `url(${props.iconClass}) no-repeat 50% 50%`,
        "-webkit-mask": `url(${props.iconClass}) no-repeat 50% 50%`,
      };
    });

    return {
      iconName,
      svgClass,
      styleExternalIcon,
      svgStyle,
      divStyle,
      changeEnter,
    };
  },
});
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
#svg-image {
  position: relative;
  left: -200px;
}
</style>
